<template>
  <div>
    <!-- 关闭弹出框 -->
    <CommonDialog
      title="修改关闭原因"
      width="75%"
      v-bind:dialogVisible="closeDialogVisible"
      @on-change-dialogVisible="closeChange"
      @search="clearForm"
      class="close"
      top="10vh"
    >
      <template #body>
        <el-form
          class="closeForm"
          ref="closeForm"
          label-width="100px"
          :model="closeForm"
          :rules="closeFormRules"
          label-position="top"
        >
          <el-row :gutter="20">
            <el-col :span="24"
              ><div class="grid-content bg-purple">
                <el-form-item label="修改关闭原因" class="closeReason" prop="closeReason">
                  <el-select
                    v-model="closeForm.closeReason"
                    placeholder="修改关闭原因"
                    @change="getFeedBackCloseSet"
                    clearable
                    filterable
                  >
                    <el-option
                      v-for="(item, index) in closeFeedBackReasonList"
                      :key="index"
                      :label="item.title"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item></div
            ></el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12"
              ><div class="grid-content bg-purple">
                <el-form-item label="解决方案" class="closeReason" prop="closeSolution">
                  <el-select
                    v-model="closeForm.closeSolution"
                    placeholder="解决方案"
                    :disabled="isSolutionCase"
                    clearable
                    filterable
                  >
                    <el-option
                      v-for="(item, index) in FeedBackCloseSet"
                      :key="index"
                      :label="item.title"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item></div
            ></el-col>
            <el-col :span="12" v-if="closeForm.closeReason === '1437597267674632193'"
              ><div class="grid-content bg-purple">
                <el-form-item label="重复反馈ID" prop="closeRepeatFeedbackNumber">
                  <el-input v-model="closeForm.closeRepeatFeedbackNumber" @change="toCheck"></el-input>
                </el-form-item></div
            ></el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24"
              ><div class="grid-content bg-purple">
                <el-form-item label="备注" class="extra closeReason" prop="extra">
                  <!-- <quill-editor
              v-model="closeForm.extra"
              ref="suspendReasonEditor"
            >
            </quill-editor> -->
                  <socialUpload :contentDefault="closeForm.extra" @getContent="getUpdateContent"></socialUpload>
                  <!-- <vue-tinymce v-model="closeForm.extra" :setting="setting" /> -->
                </el-form-item>
              </div></el-col
            >
          </el-row>
          <el-row>
            <el-col :span="5">
              <el-form-item label="添加附件" class="uploadFiles">
                <el-upload
                  class="upload-demo"
                  :action="fileUpload"
                  :on-success="onFileSuccess"
                  :on-error="onFileError"
                  :on-remove="onFileRemove"
                  :on-preview="handlePreview"
                  :data="{
                    checkOfficeFmt: false,
                    isTmp: false
                  }"
                  multiple
                  :limit="3"
                  :file-list="encLosureList"
                >
                  <el-button size="small" type="primary" style="margin-top: 6px">点击上传</el-button>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>
      <template #dialog_footer>
        <el-button class="submitCancel" @click="closeCancel">取 消</el-button>
        <el-button type="primary" @click="confirmClose('closeForm')" class="submitReme" :disabled="isClick"
          >确认</el-button
        >
      </template>
    </CommonDialog>
  </div>
</template>

<script>
import socialUpload from '../socialUpload/socialUpload.vue'
import CommonDialog from '@/components/commonDialog/commonDialog.vue'
import { FeedBack } from '@/api/feedBack/server'
export default {
    name: '',
    components: {
        CommonDialog,
        socialUpload
    },
    props: {},
    data() {
        return {
            // 文件上传列表
            encLosureList: [],
            // 文件上传地址
            fileUpload: `${process.env.VUE_APP_GOLDWIND_BASE_API}/v2/file/upload`,
            isClick: true,
            closeDialogVisible: false,
            // 关闭弹出框表单内容
            closeForm: {
                closeReason: '',
                closeSolution: '',
                extra: '',
                closeRepeatFeedbackNumber: null
            },
            FeedBackCloseSet: [],
            closeFeedBackReasonList: [],
            feedBackNumberID: '',
            isSolutionCase: true,
            feedBackList: [],
            tableItemsID: '',
            // feeditem: {},
            closeFormRules: {
                closeReason: [{ required: true, message: '请选择关闭原因', trigger: 'change' }],
                closeSolution: [{ required: true, message: '请输入解决方案', trigger: 'change' }],
                extra: [{ required: false, message: '请输入备注', trigger: 'change' }],
                closeRepeatFeedbackNumber: [
                    {
                        required: true,
                        message: '请输入重复反馈ID',
                        trigger: 'blur'
                    }
                ]
            }
        }
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {},
    methods: {
        async toCheck() {
            // validationFeedBackNumber
            try {
                const result = await FeedBack.validationFeedBackNumber({ number: this.closeForm.closeRepeatFeedbackNumber })
                if (result.success) {
                    this.isClick = false
                    this.$message.success('反馈ID验证成功')
                } else {
                    this.$message.error(result.message)
                }
            } catch (err) {
                console.log(err)
                this.$message.error('服务器异常')
            }
        },
        /**
     * @description: 上传成功
     * @param {Object} _response 成功返回结果
     * @param {Object} _file 上传的文件
     * @param {Array} _fileList 文件列表
     */
        onFileSuccess(_response, _file, _fileList) {
            console.log(_response, _file, _fileList)
            if (_response.msg === '成功') {
                this.encLosureList.push({
                    name: _response.data.sourceName,
                    url: _response.data.fileSourceId
                })
            } else {
                this.$message.error(_response.msg || '上传失败')
            }
        },

        /**
     * @description: 上传失败
     */
        onFileError() {
            this.$message.error('上传失败')
        },

        /**
     * @description: 移除文件
     * @param {Object} _file 移除的文件信息
     * @param {Array} _fileList 文件列表
     */
        onFileRemove(_file, _fileList) {
            console.log(_file, _fileList)
            this.encLosureList = _fileList
        },

        /**
     * @description: 文件导出
     * @param {Object} file 文件信息
     */
        handlePreview(file) {
            window.location.href = `${process.env.VUE_APP_GOLDWIND_BASE_API}/v2/file/download?fileSourceId=${file.url}`
        },
        show(id, _feedBackNumber) {
            this.encLosureList = []
            console.log(id, _feedBackNumber)
            this.feedBackNumberID = _feedBackNumber
            this.tableItemsID = id
            this.isClick = false
            localStorage.setItem('onID', this.tableItemsID)
            this.closeDialogVisible = true
            this.getCloseFeedBackReasonList()
        },
        /* 清空表单 */
        clearForm() {
            this.FeedBackCloseSet = []
            this.isSolutionCase = true
        },
        closeCancel() {
            this.closeDialogVisible = false
            this.$refs['closeForm'].resetFields()
        },
        closeChange(val) {
            this.closeDialogVisible = val
            this.$refs['closeForm'].resetFields()
        },
        /* 获得反馈关闭原因 */
        async getCloseFeedBackReasonList() {
            try {
                const result = await FeedBack.FormOptionGetListItemAsync({
                    type: 'FEEDBACK_CLOSE_SET'
                })
                if (result.success) {
                    this.closeFeedBackReasonList = result.data
                }
            } catch (err) {
                console.log(err)
            }
        },
        // 关闭
        async CloseOptionAsync(parmars, val) {
            try {
                const result = await FeedBack.OperationAsync(parmars)
                if (result.success) {
                    this.$message.success(result.message)
                    this.closeDialogVisible = false
                    this.closeForm = {
                        closeReason: '',
                        closeSolution: '',
                        extra: ''
                    }
                    if (val === 'true') {
                        console.log(this.feedBackNumberID)
                        this.$emit('refreshPages', this.feedBackNumberID)
                    } else {
                        this.$emit('refreshPages', '反馈ID')
                    }
                } else {
                    this.$message.error(result.message)
                    this.closeDialogVisible = false
                }
            } catch (error) {
                this.$message.error('服务器异常')
            }
        },
        // 确认关闭
        confirmClose(formName) {
            let val = ''
            for (const item of this.closeFeedBackReasonList) {
                if (item.id === this.closeForm.closeReason) {
                    val = item.val
                }
            }
            let fileUrl = null
            if (this.encLosureList != [] && this.encLosureList.length > 0) {
                const arr = []
                for (const item of this.encLosureList) {
                    if (item.status) {
                        arr.push({
                            name: item.name,
                            url: item.url
                        })
                    } else {
                        arr.push(item)
                    }
                }
                const strs = JSON.stringify(arr)
                fileUrl = strs.substring(1, strs.length - 1)
            }
            console.log('fileUrl', fileUrl)
            const objParmars = {
                closeTheReason: this.closeForm.closeReason,
                content: this.closeForm.closeSolution,
                id: this.tableItemsID,
                operationType: 22,
                remark: this.closeForm.extra,
                closeRepeatFeedbackNumber: this.closeForm.closeRepeatFeedbackNumber,
                fileUrl: fileUrl
            }
            this.$refs[formName].validate(valid => {
                if (valid) {
                    this.CloseOptionAsync(objParmars, val)
                    this.$refs[formName].resetFields()
                } else {
                    this.$message.error('请检查表单信息是否填写完整')
                    return false
                }
            })
        },
        async getFeedBackCloseSet(_val) {
            this.closeForm.closeRepeatFeedbackNumber = null
            this.closeForm.closeSolution = ''
            if (_val === '1437597267674632193') {
                this.isClick = true
            } else {
                this.isClick = false
            }
            //  根据当前id 获得解决方案下拉列表
            try {
                const result = await FeedBack.FormOptionGetListItemAsync({
                    id: _val,
                    type: 'FEEDBACK_CLOSE_SET'
                })
                if (result.success) {
                    this.FeedBackCloseSet = result.data
                    /* 打开解决方案 */
                    this.isSolutionCase = false
                }
            } catch (err) {
                console.log(err)
            }
        },
        getUpdateContent(Value) {
            this.closeForm.extra = Value
        }
    }
}
</script>

